<template>
  <div style="border:1px red solid; width: 100%; height: 100%; padding: 20px">
    <p @click="testFn">testFn</p>
    <el-input v-model="formValues.xxxxxxx" style="width: 100px"></el-input>
    <e3gForm v-model="formValues" :schema="schema" :colon="false" @submit="submitFn" @testForm="testForm" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch,h, computed, onMounted, withDefaults, unref, watchEffect, withModifiers, useTemplateRef } from 'vue'
import { e3gForm } from '@e3g-ui/el-lib'
import TestComp from './TestComp.vue'

const isIf = ref(true)
const testNum = ref(0)

/**
* @description: 
*/
const testFn = () => {
  isIf.value = !isIf.value
  testNum.value++;
}

/**
* @description: 提交表单
*/
const submitFn = (v) => {
  console.log('提交表单',v);
}

/**
* @description: 
*/
const testForm = (v) => {
  console.log('testForm',v);
}

const optionsData = [
  {
    label1:'label1',
    value1:'value1',

  },
  {
    label1:'label2',
    value1:'value2',
  },
]

const formValues = ref({
  // age:'',
  username:'外部传进来的名字',
  xxxxxxx:'123',
})

const schema = [
  {
    label: '用户名',
    prop: 'username',
    component: 'input',
    componentProps: {
      placeholder: '请输入用户名',
      onChange: (e) => {
        console.log('用户名输入变化:', e)
      }
    },
    componentSlots:{
      prepend: ({value, column}) => {
        // debugger
        return h('span',{}, 'https://')
      },
      append: () => {
        return h('span',{}, '.com')
      }
    },
    formItemProps:{
      // labelWidth: '130px',
    },
    // isIf: computed(() => {
    //   // debugger  
    //   return isIf.value
    // }),
    isIf: (modelValue, allModelValue, p) => {
      // debugger;
      // console.warn('allModelValue',allModelValue )
      return allModelValue.age == 20
    },

    colProps: {
      span: 8
    },
    tooltip:'这是用户名 最多8个字',
    defaultValue: '456',
  },

  {
    label: '年龄',
    prop: 'age',
    component: 'input',
    componentProps: (a,b) => {
      // debugger;
      return {
        placeholder: '请输入年龄',
        size: a.age > 18 ? 'large' : 'small',
        onChange: (e) => {
          console.log('年龄输入变化:', e)
        }
      }
    },
    renderLabel: () => {
      return h('p',{}, `年龄${testNum.value}`)
    },
    isIf: (formValues) => {
      // debugger;
      return true
    },
    colProps: {
      span: 8
    },
    defaultValue: '18',
  },

  {
    label: '下拉框',
    prop: 'select',
    component: 'select',
    componentProps: (formValues) => {
      return {
        placeholder: '请选择select',
        clearable:false,
        onChange: (e) => {
          console.log('select:', e)
        },
        // options: [
        //   {
        //     label1:'label11111内部',
        //     value1:'value1',
        //   },
        //   {
        //     label1:'label22222内部',
        //     value1:'value2',
        //   },
        // ],
        // props:{
        //   label:'label1',
        //   value:'value1',
        // },
      }
    },
    optionsMap:{
      label:'label1',
      value:'value1',
    },
    options: computed(() => {
      return optionsData
    }),
    childrenComponentProps: {
      // disabled: true,
    },
    childrenComponentSlot:{
      // {value, column}
      default: ({item, value, column}) => {
        return h('span',{}, item.label === 'label1' ? '我是label1' : item.label)
      }
    },
    // options:(p) => {
    //   // debugger
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       console.log('已经进入定时器 options',)
    //       resolve(optionsData)
    //     }, 3000)
    //   })
    // },
    componentSlots:{
      // prepend: ({value, column}) => {
      //   // debugger
      //   return h('span',{}, 'https://')
      // },
    },
    formItemProps:{
      // labelWidth: '130px',
    },
    // isIf: computed(() => {
    //   // debugger  
    //   // return isIf.value
    //   return true
    // }),
    isIf:true,
    colProps: {
      span: 8
    },
    // tooltip:'这是用户名 最多8个字',
    defaultValue: 'value2',
  },



  {
    label: '自定义组件-自定义',
    prop: 'test',
    component: TestComp,
    componentProps: (formValues) => {
      return {
        // placeholder: '请输入年龄',
        // onChange: (e) => {
        //   console.log('年龄输入变化:', e)
        // }
      }
    },
    componentSlots:{
      default: (a) => {
        return '123solt'
      },
    },
    renderLabel: () => {
      return h('p',{}, `自定义组件`)
    },
    isIf: (formValues) => {
      // debugger;
      return true
    },
    colProps: {
      span: 8
    },
    // defaultValue: '自定义组件默认值',
  },
]



// setTimeout(() => {
//   console.log('修改 commonConfig');
//   commonConfig.value.labelWidth = '9000px'
// }, 6000)

</script>



<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
</style>
